<template>
    <v-list  class="light-green lighten-5  pt-5">
      <v-list-item-group>
        <my-relation :relation="follow" @queryRelation="queryUserIndex" v-for="follow in follows" :key="follow.userId"></my-relation>
        <el-empty v-show="follows.length == 0" description="该用户暂无关注"></el-empty>
      </v-list-item-group>
    </v-list>
</template>

<script>
import MyRelation from '../views/MyRelation.vue'

export default {
  name: 'MyUserFollows',
  components: {MyRelation},
  data: ()=>({
    follows: []
  }),
  computed: {
    user(){
      return this.$store.state.user
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      const uid = to.query.id;
      // 根据路由id，查询并设置用户页的信息
      vm.queryUserFollows(uid)
    })
  },
  methods:{
    doQueryUserFollows(url, config){
      this.$axios.get(url, config).then(rep=>{
        const res = rep.data
        if(res.status != 200){
          this.$message.error(res.msg)
          return;
        }
        this.follows = res.data
      }).catch(Error=>{
          console.log(Error)
      })
    },
    queryUserFollows(uid){
      const userId = this.user.userId
      const token = this.user.token

      if(userId && token){
        this.doQueryUserFollows('/api/user/follows/u', {
          params:{uid, userId},
          headers: {token }
        })
      }else{
        this.doQueryUserFollows('/api/user/follows', {params: {userId: uid}})
      }
    },
    queryUserIndex(){
      this.$parent.queryUserIndex(this.user.userId)
    }
  }
}
</script>

<style scoped>
</style>